<template>

  <div class="mianbu-wrap">

    <div class="top"></div>
    <div class="top-bot">
      <img @click="gofenlei" src="../../assets/img/shouye/header-xinpin/back.png"/>
      <span>面部护理</span>
    </div>
    <div class="xuanxiang">
      <ul>
        <li><a >销量</a></li>
        <li><a >最新</a></li>
        <li><a >价格</a></li>
        <li><a @click="goshuaixuan">筛选</a></li>
      </ul>
    </div>
    <div v-show="shanchu"  class="qingkong">
      <div class="tx">
      <div v-show="xian" class="tx1">
        <span>洁面护理</span>
        <span @click="demove">x</span>
      </div>
      <div v-show="xian2"  class="tx2">
        <span>人气口红</span>
        <span @click="demove2" >x</span>
      </div>
      </div>
      <div class="delete">
        <span @click="del">清空</span>
      </div>
    </div>
    <div @click="gocarty" class="mianbuhuli">
      <div class="le middle">
        <img src="../../assets/img/fenlei/kouhong.jpg" />
      </div>
      <div class="ri">
        <span>焕彩萃璨花蕊唇彩4.8g</span>
        <p>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
        <div>
          <img src="../../assets/img/fenlei/japan.jpg" alt="" />
          <img src="../../assets/img/fenlei/feiji.jpg" alt="" class="plain" />
          <span>海外直邮</span>
          <p>¥166</p>
        </div>
      </div>
    </div>
    <div @click="gocarty" class="mianbuhuli">
      <div class="le middle">
        <img src="../../assets/img/fenlei/kouhong.jpg" />
      </div>
      <div class="ri">
        <span>焕彩萃璨花蕊唇彩4.8g</span>
        <p>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
        <div>
          <img src="../../assets/img/fenlei/japan.jpg" alt="" />
          <img src="../../assets/img/fenlei/feiji.jpg" alt="" class="plain" />
          <span>海外直邮</span>
          <p>¥166</p>
        </div>
      </div>
    </div>
    <div @click="gocarty" class="mianbuhuli">
      <div class="le middle">
        <img src="../../assets/img/fenlei/kouhong.jpg" />
      </div>
      <div class="ri">
        <span>焕彩萃璨花蕊唇彩4.8g</span>
        <p>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
        <div>
          <img src="../../assets/img/fenlei/japan.jpg" alt="" />
          <img src="../../assets/img/fenlei/feiji.jpg" alt="" class="plain" />
          <span>海外直邮</span>
          <p>¥166</p>
        </div>
      </div>
    </div>
    <div @click="gocarty" class="mianbuhuli">
      <div class="le middle">
        <img src="../../assets/img/fenlei/kouhong.jpg" />
      </div>
      <div class="ri">
        <span>焕彩萃璨花蕊唇彩4.8g</span>
        <p>焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</p>
        <div>
          <img src="../../assets/img/fenlei/japan.jpg" alt="" />
          <img src="../../assets/img/fenlei/feiji.jpg" alt="" class="plain" />
          <span>海外直邮</span>
          <p>¥166</p>
        </div>
      </div>
    </div>

    <div class="bot">
      <img src="../../assets/img/fenlei/datu.jpg" alt="">
      <a>加载更多</a>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        xian:true,
        xian2:true,
        shanchu:true
      }
    },
    methods:{
      goshuaixuan(){
        this.$router.push({path:'/shuaixuan'})
      },
      gofenlei(){
        this.$router.push({path:'/FenLei'})
      },
      demove(){
        this.xian=false
      },
      demove2(){
        this.xian2=false
      },
      del(){
        this.shanchu=false
      },
      gocarty(){
        this.$router.push({path:'/querendingdan'})
      }
    }
  }
</script>

<style scoped>
  .mianbu-wrap{
    background: #f2f2f2;
  }
  .top{
    width: 100%;
    height: 1rem;
    background: red;
  }
  .top-bot{
    position: relative;
    width: 100%;
    height: 2rem;
    background: red;
  }
  .top-bot img{
    height: 50%;
    margin: 0.5rem;
  }
  .top-bot span{
    position: absolute;
    top: 25%;
    left: 40%;
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
  }
  .xuanxiang{
    height: 1rem;
  }

  .xuanxiang li{
    width: 15%;
    display: inline-block;
    font-size: 0.6rem;
    margin: 0 0.5rem;
    text-align: center;
  }
  .xuanxiang li a:hover{
    color: red;
  }
  .qingkong{
    background: #fff;
    padding:0.5rem;
    margin-top: 0.5rem;
    font-size: 0.6rem;
    display: flex;
    justify-content: space-between;
  }
  .tx{
    display: flex;
    justify-content: flex-start;
  }
  .tx1,.tx2{
    background: #666666;
    margin-left: 0.5rem;
    padding: 0.1rem 0.2rem;
    color: #fff;
    border-radius: 0.2rem;
  }
  .delete{
    border: 1px solid #ccc;
    padding: 0.1rem 0.2rem;
    border-radius: 0.2rem;
  }
  .mianbuhuli {
    width: 100%;
    background: #fff;
    /*font-family: MicrosoftYaHei;*/
    font-size: 0.5rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.2rem;
    letter-spacing: 0.01rem;
    color: #333333;
    display: flex;
    justify-content: space-between;
    height: 3.9rem;
    box-shadow: 0rem 0.05rem 0rem 0rem #cccccc;
    margin: 0.4rem 0rem;
  }

  .mianbuhuli .le {
    flex: 11;
    text-align: center;
  }

  .mianbuhuli .le img {
    /*width: 1.6rem;*/
    height: 3rem;
  }

  .mianbuhuli .ri {
    flex: 25;
  }

  .mianbuhuli .ri>span {
    display: inline-block;
    font-size: 0.6rem;
    height: 1.4rem;
    line-height: 1.4rem;
  }

  .mianbuhuli .ri p {
    font-family: SimHei;
    font-size: 0.5rem;
    line-height: 0.8rem;
    letter-spacing: 0rem;
    color: #4d4d4d;
  }

  .mianbuhuli .ri div {
    position: relative;
  }

  .mianbuhuli .ri div span {
    font-size: 0.5rem;
  }

  .mianbuhuli .ri div p {
    position: absolute;
    right: 0.5rem;
    top: 0.04rem;
    color: #e53e42;
  }

  .mianbuhuli .ri div img:first-child {
    width: 0.6rem;
    height: 0.4rem;
  }

  .mianbuhuli .ri div .plain {
    width: 0.6rem;
    height: 0.6rem;
  }

  .bot{
    text-align: center;
  }
  .bot img{
    width: 100%;
    height: 5rem;
    font-size: 0;
  }
  .bot a{
    font-size: 0.5rem;
    margin: 0;
  }
</style>
